<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IPagedList<PoserLoot.Web.Models.Entry>>" %>

<%@ Import Namespace="PoserLoot.Web.Core.Paging" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    <%= ViewData["Page.Title"] %>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="LeftContent" runat="server">
    <% Html.RenderPartial("CategoryIndex", ViewData["IEnumerable<Category>"]); %>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="gridTopic" class="topic">
        <h2>
            <%= ViewData["Page.Title"] %></h2>
        <div class="display">
            <div id="gridTopic_grid" class="gridview" onmouseover="displaySwitch('grid')" onmouseout="displaySwitch('grid')"
                onclick="changeDisplay(this, 'grid')">
            </div>
            <div id="gridTopic_list" class="listview" onmouseover="displaySwitch('list')" onmouseout="displaySwitch('list')"
                onclick="changeDisplay(this, 'grid')">
            </div>
        </div>
    </div>
    <div class="toolbar">
        <% Guid categoryId = new Guid(ViewData["CategoryId"].ToString());
           if (categoryId != Guid.Empty)
           { %>
        <%= Html.ActionLink("[Edit]", "Edit", "Category", new { id = ViewData["CategoryId"] }, null)%>
        <%= Html.ActionLink("[Create New]", "Create", new { id = ViewData["CategoryId"] })%>
        -
        <%} %>
        <div class="paging">
            <%= Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount) %>
        </div>
    </div>
    <div id="grid" class="grid">
        <% foreach (var item in Model)
           {
               Guid galleryId = Guid.Empty;

               if (!item.ThumbnailReference.IsLoaded)
                   item.ThumbnailReference.Load();

               if (item.Thumbnail != null)
                   galleryId = item.Thumbnail.GalleryId;
        %>
        <div id="<%= "p_" + item.EntryId.ToString("N") %>" class="gridItem" onmouseover="enlarge(this);"
            onmouseout="enlarge(this);">
            <div class="frame">
                <a href="<%= Url.Action("Details", new { id = item.EntryId }) %>">
                    <img src="<%=Url.Action("Thumbnail", "Gallery", new { id = galleryId }) %>" alt="<%= item.Code %>" />
                </a>
            </div>
            <div class="content">
                <div class="price">
                    <%= Html.Encode(item.Code) %></div>
                <div class="addtocart">
                    &nbsp;
                </div>
                <div class="name">
                    <%= Html.ActionLink(item.Appellation, "Details", new { id = item.EntryId })%></div>
                <div class="desc">
                    <%= item.Summary%>
                </div>
            </div>
        </div>
        <% } %>
    </div>
    <div class="clear">
    </div>
    <div class="toolbar">
        <div class="paging">
            <%= Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount) %>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            LoadBanner('banners');
        });
        function enlarge(ctr) {
            var gridItem = $('#' + ctr.id);
            var className = gridItem.attr('class');


            if (gridItem.hasClass('gridItem')) {
                //grid

                gridItem.toggleClass('gridItem_on');
            }
            else {
                //list
                gridItem.toggleClass('gridItem_v_on');
            }
        }
        function displaySwitch(type) {
            var grid = $(".topic .grid");
            var list = $(".topic .list");
            if (type == 'grid') {
                if (grid.hasClass('grid_on'))
                    grid.removeClass('grid_on');
                else
                    grid.addClass('grid_on');
            }
            else {
                if (list.hasClass('list_on'))
                    list.removeClass('list_on');
                else
                    list.addClass('list_on');
            }
        }
        function changeDisplay(ctr, id) {
            var source = $('#' + ctr.id);
            if (source.hasClass('listview')) {
                $('#' + id + ' .gridItem').removeClass('gridItem').addClass('gridItem_v');
            }
            else {
                $('#' + id + ' .gridItem_v').removeClass('gridItem_v').addClass('gridItem');
            }
        }
        function LoadBanner(ctr) {
            $('#' + ctr + ' .banner:gt(0) ').css("display", "none");
            $('#' + ctr + ' ul li a').mouseover(function() {
                var index = $('#' + ctr + ' ul li a').index(this);
                $('#' + ctr + ' .banner').css("display", "none");
                $('#' + ctr + ' .banner:eq(' + index + ') ').fadeIn('slow');
            });
        }
    </script>

</asp:Content>
